<template>
  <!-- 发货单 -->
  <div>
    <TopFilter :list="formList" :row="3" @filterChange="changeHandle" />
    <FilterTable
      ref="table"
      height="auto"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="partPartInventoryAdjustInventoryBillNo"
      :columns="columns"
      selectionType="single"
      :onRowSelectChange="param => (this.selectedTableData = param)"
      :onColumnsChange="columns => (this.columns = columns)"
      :isExportExcel="true"
      :onCalcExportData="exportFun"
      exportFileName="借出出库未还入.xlsx"
    ></FilterTable>
    <!-- :dataSource="dataSource"
      :isMemoryPagination="true" -->
    <div class="btnWrap">
      <el-button @click="handleCancle">关 闭</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { queryControlLocations } from '@/api/part/common';
import { notifyAction } from '@/utils';
import { getShippedItem, getInvoiceList } from '@/api/part/report/orderExecution';
import { queryAllocateoutData } from '@/api/part/partInventory/adjustInventory/index';
import { getAllUser, getStorageList } from '@/api/part/common';
export default {
  props: {
    // 初始化表单
    rowData: {
      type: Array
      // default: () => ({})
    },
    orderTypeData: {
      type: Array,
      default: () => []
    },
    billNo: {
      type: String
    }
  },
  data() {
    return {
      fetchApi: queryAllocateoutData,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      formList: this.createFormList(),
      tableData: [],
      userList: {}, // 员工信息
      selectedTableData: [], // 选中的数据
      dataSource: []
    };
  },
  watch: {
    billNo(newVal, oldVal) {
      if (newVal) {
        this.formList.find(item => item.fieldName == 'billNo').disabled = true;
      }
    }
  },
  created() {
    this.getAllUser();
  },
  mounted() {
    this.initValue();
    // this.initFormpanel();
    // this.initSearch();
  },
  methods: {
    // 导出数据处理
    exportFun(row) {
      for (const key in row) {
        switch (key) {
          case 'CREATED_BY':
            row[key] = this.userList[row.CREATED_BY];
            console.log('row[key]:::', row[key]);
            break;
          default:
            break;
        }
      }
    },
    // 初始化数据
    initValue() {
      this.formList.find(item => item.fieldName == 'billNo').initialValue = this.billNo;
    },
    // 搜索按钮
    changeHandle(val) {
      this.fetchParams.xhrAbort = true;
      // console.log(123, val);
      this.fetchParams = Object.assign({}, { xhrAbort: false }, val);
    },
    // 初始化表单
    initFormpanel() {
      // console.log(this.rowData, 123);
      this.formList.forEach(element => {
        element.initialValue = this.rowData[element.fieldName];
        if (element.fieldName == 'KUNNR|NAME1') {
          element.initialValue = [this.rowData.KUNNR, this.rowData.NAME1];
        }
        if (element.fieldName == 'KUNNRS|NAME1S') {
          element.initialValue = [this.rowData.KUNNRS, this.rowData.NAME1S];
        }
      });
      this.formList.find(x => x.fieldName === 'QAUART').itemList = this.orderTypeData.map(x => ({ text: x.partTypeName, value: x.partTypeId }));
    },
    // 初始化查询
    async initSearch() {
      let res = await getInvoiceList({
        VBELN: this.rowData.BVBELN,
        I_SVBELN: this.rowData.SVBELN
      });
      this.dataSource = [];
      this.dataSource = res.data;
    },
    // 上方表单
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '单据编号',
          fieldName: 'billNo',
          placeholder: '',
          initialValue: '',
          disabled: false
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },

        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partNo',
          placeholder: '',
          initialValue: '',
          disabled: false
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        }
        // {
        //   type: 'INPUT',
        //   label: '文化公司',
        //   fieldName: 'ARKTX',
        //   placeholder: '',
        //   initialValue: '',
        //   disabled: true
        // style: { width: '200px' },
        // rules: [
        //   { required: true, message: '请输入标题名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ]
        // },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          // width: 70,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '借出出库单号',
          dataIndex: 'ALLOCATE_OUT_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '建单用户',
          dataIndex: 'CREATED_BY',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          render: params => {
            return <span>{this.userList[params.row.CREATED_BY]}</span>;
          }
        },
        {
          title: '仓库代码',
          dataIndex: 'STORAGE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '仓库名称',
          dataIndex: 'STORAGE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '数量',
          dataIndex: 'IN_QUANTITY',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '单位',
          dataIndex: 'UNIT_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    // 查询所有员工
    async getAllUser() {
      let res = await getAllUser();
      let obj = {};
      res.data.map(item => {
        obj[item.userId] = item.employeeName;
      });
      this.userList = obj;
    },
    handleConfirm() {
      if (this.selectedTableData.length) {
        try {
          if (this.rowData && this.rowData.length) {
            this.rowData.forEach(element => {
              this.selectedTableData.forEach(e => {
                if (e.PART_NO == element.PART_NO) {
                  throw new Error('已存在该配件');
                }
              });
            });
          }
        } catch (Error) {
          return notifyAction('已存在该配件', 'warning');
        }
        this.selectedTableData.forEach(e => {
          e.IN_AMOUNT = Number(eval(e.IN_PRICE * e.IN_QUANTITY)).toFixed(2);
          e.unitCode = e.unit;
          e.ITEM_ID = 'N';
          e.FLAG = 'A';
        });
        this.$emit('onConfirm', this.selectedTableData);
        this.handleCancle();
      } else {
        notifyAction('请选择单号', 'warning');
      }
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
